import React from 'react';
import {Layout,Select,Input,Table,DatePicker } from 'antd'
import {SearchOutlined } from '@ant-design/icons';
import './Check.css'
const { Option } = Select;
const {Search} = Input
const { RangePicker } = DatePicker;
const columns = [
    {
        title: '核销流水号',
        dataIndex: 'name',
        align:'center',
    },
    {
        title: '核销日期',
        dataIndex: 'age',
        align:'center',
    },
    {
        title: '经销商名称',
        dataIndex: 'address',
        align:'center',
    },
    {
        title: '单据类型',
        dataIndex: 'address',
        align:'center',
    },
    {
        title: '单据编码',
        dataIndex: 'address',
        align:'center',
    },
    {
        title: '单据金额',
        dataIndex: 'address',
        align:'center',
    },
    {
        title: '核销金额',
        dataIndex: 'address',
        align:'center',
    },
];

const data = [];
for (let i = 0; i < 46; i++) {
    data.push({
        key: i,
        name: `Edward King ${i}`,
        age: 32,
        address: `London, Park Lane no. ${i}`,
    });
}

function handleChange(value) {
    console.log(`selected ${value}`);
    // selectValue =`selected ${value}`
}
// function onChangeA(date, dateString) {
//     console.log(date, dateString);
// }
//核销记录
class Record extends React.Component {
    constructor(){
        super()
        this.state = {
            selectedRowKeys: [], // Check here to configure the default column
            loading: false,
        };
    }
    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({ selectedRowKeys });
    };

    render() {
        const { selectedRowKeys } = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };
        return (
            <div>
                <Layout style={{backgroundColor:'white',marginTop:'5px'}}>
                    <div className='Top2'>
                        <RangePicker style={{width:300}}/>
                        <div>
                            <Select bordered={false} style={{marginLeft:'10px',width:120,marginRight:'20px'}} defaultValue="按经销商"  onChange={handleChange}>
                                <Option value="按单据">按单据</Option>
                                <Option value="按经销商">按经销商</Option>
                            </Select>
                            <Search
                                placeholder="请输入支付流水号/单号/经销商名称"
                                onSearch={value => console.log(value)}
                                style={{width:400}}
                            />
                        </div>
                    </div>
                </Layout>
                <div className='tableBox'>
                    <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
                </div>
            </div>
        );
    }
}

export default Record;